<template>
  <div class="chat-input-actions">
    <div class="chat-input-action">
      <div class="icon">
        <img :src="BreakIcon" alt="" />
      </div>
    </div>

    <a-select
      ref="select"
      v-model:value="selectedModel"
      style="width: 160px"
      :options="modelList"
    >
    </a-select>
  </div>
</template>

<script setup lang="ts">
import { GptVersion } from '@/utils/constants';
import { PropType, ref } from 'vue';
import BreakIcon from '@/icons/break.svg';
import { SessionConfig } from '@/types/chat';

const props = defineProps({
  config: {
    type: Object as PropType<SessionConfig>,
    required: true,
  },
});

const selectedModel = ref(props.config.gptVersion ?? GptVersion.GPT_3_5_TURBO);

const modelList = ref([
  // { value: GptVersion.TEXT_DAVINCI_003, label: 'text-davinci-003' },
  // { value: GptVersion.TEXT_DAVINCI_002, label: 'text-davinci-002' },
  // { value: GptVersion.DAVINCI, label: 'davinci' },
  { value: GptVersion.GPT_3_5_TURBO, label: 'gpt-3.5-turbo' },
  // { value: GptVersion.GPT_3_5_TURBO_16K, label: 'gpt-3.5-turbo-16k' },
  // { value: GptVersion.GPT_4, label: 'gpt-4' },
  // { value: GptVersion.GPT_4_32K, label: 'gpt-4-32k' },
]);
</script>

<style scoped lang="scss">
.chat-input-actions {
  display: flex;
  flex-wrap: wrap;

  .chat-input-action {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    font-size: 18px;
    background-color: var(--white);
    color: var(--white);
    border: var(--border-in-light);
    padding: 0px 14px;
    animation: slide-in ease 0.3s;
    box-shadow: var(--card-shadow);
    transition: all ease 0.3s;
    align-items: center;
    cursor: pointer;

    &:not(:last-child) {
      margin-right: 5px;
    }

    .text {
      white-space: nowrap;
      padding-left: 5px;
      opacity: 0;
      transform: translateX(-5px);
      transition: all ease 0.3s;
      transition-delay: 0.1s;
      pointer-events: none;
    }

    &:hover {
      background-color: #e3e3e3;
      .text {
        opacity: 1;
        transform: translate(0);
      }
    }

    .text,
    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
